<template>
  <div class="content">
    <div class="zhan"></div>
    <div class="list-info" v-if="form.state === '3'">
      <div v-for="(item,index) in topGoodsList" :key="index">
        <span>{{item.label}}</span>
        <p>{{item.value}}</p>
      </div>
    </div>
    <div class="address-info">
      <div class="top-left">
        <div class="one-info">
          <div class="info">
            <i-icon
              class="coordinates"
              type="coordinates"
              size="28"
              color="#dddddd"
            />
            <div>
              收货人：
              <p>{{setAdderss.addressContact}}</p>
              <span>{{setAdderss.addressPhone}}</span>
            </div>
          </div>
          <p
            class="update-address-btn"
            v-if="form.state === '1' && form.shippingMode === '0'"
            @click="updateAddress"
          >修改</p>
        </div>
        <div
          class="add"
        >{{setAdderss.province}}{{setAdderss.area}}{{setAdderss.city}}{{setAdderss.addressInfo}}</div>
      </div>
    </div>

    <div class="list-info">
      <div class="shop-info">
        <div class="margin">
          <img :src="goodsForm.goodsImg" mode="scaleToFill" />
          <div class="right">
            <p class="ellipsis">{{goodsForm.goodsName}}</p>
            <div>
              <span
                class="tab"
                v-if="goodsForm.goodsSpecList"
              >{{goodsForm.goodsSpecList.length ? goodsForm.goodsSpecList[0].goodsSpecName : ''}}</span>
              <label v-else></label>
            </div>
            <div class="money">
              <span>{{goodsForm.stockSupplyCost}}</span>
              <!-- <p>×{{goodsForm.stockSupplyNum}}</p> -->
              <p>×{{form.goodsNum}}</p>
            </div>
          </div>
        </div>
      </div>

      <div v-for="(item,index) in list" :key="index">
        <span>{{item.label}}</span>
        <p :class="item.isRed ? 'red' : ''">{{item.value}}</p>
      </div>
    </div>

    <div class="list-info">
      <div v-for="(item,index) in logisticsList" :key="index">
        <span class="gray">{{item.label}}</span>
        <p class="red" v-if="item.isCopy" @click="copyOrderClick">复制</p>
        <p class="red" v-if="item.isFind" @click="findLogisticsClick">查看物流</p>
      </div>
    </div>

    <div
      class="list-info"
      v-if="form.state === '4' || form.state === '5' || form.state === '8'"
    >
      <div v-for="(item,index) in refundList" :key="index">
        <span class="gray">{{item.label}}</span>
        <p>{{item.value}}</p>
      </div>
    </div>

    <div
      class="list-info"
      v-if="form.state === '4' || form.state === '5' || form.state === '8' || refundForm.image1 || refundForm.image2 || refundForm.image3"
    >
      <div class="img-box">
        <img
          v-for="(item,index) in refundImgList"
          :key="index"
          class="refundImg"
          :src="item"
          mode="scaleToFill"
        />
      </div>
    </div>
    {{form.state}}
    <button
      class="btn"
      v-if="form.state === '1' && form.shippingMode === '0'"
      @click="yesRefund"
    >立即发货</button>
    <button
      class="btn"
      v-else-if="form.isApply !== '1' && form.state === '3'"
      @click="supplierExpendDisClick"
    >申请扣除赊货锁额</button>
    <button
      class="btn2"
      v-if="form.state === '4'"
      @click="refundClick('agree')"
    >拒绝退款</button>
    <button
      class="btn"
      v-if="form.state === '4'"
      @click="refundClick('refuse')"
    >同意退款</button>
    <button class="btn3" v-if="form.state === '5'">已退款</button>
    <div class="rejectRefundClass" v-if="rejectRefundClass">
      <p>请写拒绝理由</p>
      <textarea
        class="input"
        wrap="hard"
        placeholder="请输入拒绝理由"
        maxlength="9999"
        v-model="textareaVal"
      ></textarea>
      <div>
        <button class="ok" @click="rejectRefundOk">确认</button>
        <button class="no" @click="rejectRefundNo">取消</button>
      </div>
    </div>
    <div class="zz" v-if="rejectRefundClass"></div>
  </div>
</template>

<script>
import {
  FIND_STOCK_ORDER_INFO,
  FIND_STOCK_GOODS_INFO,
  FIND_SHOP_GOODS_INFO,
  SUPPLIER_EXPEND_DIS,
  FIND_REFUND_PAGE_API,
  AGREE_REFUND,
  REFUSE_REFUND
} from '@/api'
import { getCurrentPageParams, currencyFormatter } from '@/utils'

export default {
  components: {},
  props: {},
  data () {
    return {
      form: {},
      goods: {},
      setAdderss: {},
      saleNum: null,
      modeForm: {
        '0': '物流',
        '1': '到店自提',
        '2': '商家上门',
        '3': '店内消费'
      },
      orderState: {
        '0': '待付款',
        '1': '待收货',
        '2': '已取消',
        '3': '已收货',
        '4': '退款中',
        '5': '已退款',
        // '6': '用户删除订单',
        '7': '已评价',
        '8': '拒绝退款'
      },
      refundId: '',
      refundForm: {},
      refundImgList: [],
      textareaVal: '',
      rejectRefundClass: false
    }
  },
  computed: {
    account () {
      return this.$cookie.get('account')
    },
    orderForm () {
      return {
        ...this.form
      }
    },
    goodsForm () {
      return {
        ...this.goods,
        stockSupplyCost: currencyFormatter(this.goods.stockSupplyCost, 1)
      }
    },
    topGoodsList () {
      return [
        {
          label: '剩余商品件数',
          value: this.goods.stockSupplyNum - this.saleNum
        }
      ]
    },
    logisticsList () {
      return [
        {
          label: `订单编号：${this.form.orderNo}`,
          isCopy: true,
          isFind: false
        },
        {
          label: `服务方式：${this.modeForm[this.form.shippingMode]}`,
          isCopy: false,
          isFind: !!(
            (this.form.state === '1' || this.form.state === '8') &&
            this.form.shippingMode === '0'
          )
        }
      ]
    },
    list () {
      return [
        {
          label: '运费',
          value: currencyFormatter(this.form.shippingFee, 1),
          isRed: false
        },
        {
          label: `赊货锁额(${this.goods.stockCreditPre}%)`,
          // value: currencyFormatter(
          //   this.goods.stockSupplyNum *
          //     this.goods.stockSupplyCost *
          //     (this.goods.stockCreditPre * 0.01),
          //   1
          // ),
          value: currencyFormatter(
            this.form.goodsNum *
              this.goods.stockSupplyCost *
              (this.goods.stockCreditPre * 0.01),
            1
          ),
          isRed: true
        }
      ]
    },
    refundList () {
      return [
        {
          label: '货物状态',
          // this.refundForm.state
          value: '未收货'
        },
        {
          label: '退款原因',
          value: this.refundForm.reason
        }
      ]
    }
  },
  watch: {},
  created () {},
  mounted () {},
  onShow () {
    this.refundId = ''
    this.refundForm = {}
    this.refundImgList = []
    this.shopOrderCount()
    this.getStockOrderInfo()
  },
  methods: {
    updateAddress () {
      // to do 没有高保，暂时先注释了
      this.$router.push(`/pages/data-analyze/stock/set-adderss/main`)
    },
    rejectRefundOk () {
      if (!this.textareaVal) {
        this.$toast('拒绝理由不能为空')
        return false
      }
      this._rejectRefund()
    },
    rejectRefundNo () {
      this.rejectRefundClass = false
      this.textareaVal = ''
    },
    refundClick (val) {
      const vm = this
      console.log(vm.refundId)
      if (val === 'agree') {
        vm.$dialog('是否确认拒绝退款', '', '#ef250b').then(() => {
          // vm.payOrder(item)
          this.rejectRefundClass = true
        })
      } else {
        vm.$dialog('是否确认申请退款', '', '#ef250b').then(() => {
          // vm.payOrder(item)
          vm._confirmRefund() // 这个是同意
        })
      }
    },
    copyOrderClick () {
      const vm = this
      wx.setClipboardData({
        data: vm.form.orderNo,
        success (res) {
          vm.$toast('复制成功')
        }
      })
    },
    findLogisticsClick () {
      const vm = this
      vm.$router.push(
        `/pages/data-analyze/stock/my/logistics/main?orderNo=${vm.form.orderNo}`
      )
    },
    yesRefund () {
      this.$router.push(
        `/pages/shop-management/shop-order-info-shipments/main?orderNo=${
          this.form.orderNo
        }&type=stock`
      )
    },
    supplierExpendDisClick () {
      const vm = this
      vm.$dialog('是否申请扣除赊货锁额', '', '#ef250b').then(() => {
        vm.supplierExpendDis()
      })
    },
    /** api **/
    shopOrderCount () {
      const vm = this

      let params = {
        shopId: vm.account.shopId,
        providerId: vm.account.providerId,
        orderNo: getCurrentPageParams('orderNo')
      }

      FIND_REFUND_PAGE_API(params, 1, 1)
        .then(r => {
          if (r.data.code === '0') {
            if (r.data.data.list.length) {
              vm.refundForm = r.data.data.list[0]
              vm.refundId = r.data.data.list[0].refundId
              if (vm.refundForm.image1) {
                vm.refundImgList.push(vm.refundForm.image1)
              }
              if (vm.refundForm.image2) {
                vm.refundImgList.push(vm.refundForm.image2)
              }
              if (vm.refundForm.image3) {
                vm.refundImgList.push(vm.refundForm.image3)
              }
            }
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    }, // 退款详情
    _confirmRefund () {
      const vm = this
      AGREE_REFUND(vm.refundId, vm.account.shopId, 0)
        .then(r => {
          if (r.data.code === '0') {
            vm.$alert('同意退款成功', '').then(() => {
              vm.$router.go(-1)
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    }, // 同意退款
    _rejectRefund () {
      const vm = this
      REFUSE_REFUND(vm.refundId, this.textareaVal)
        .then(r => {
          if (r.data.code === '0' && r.data.data) {
            vm.$alert('拒绝退款成功', '').then(() => {
              vm.$router.go(-1)
              vm.rejectRefundClass = false
              vm.textareaVal = ''
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    }, // 拒绝退款
    supplierExpendDis () {
      const vm = this
      let params = {
        // disShopId: vm.form.disShopId,
        disShopId: vm.form.customerId,
        freeGoodsNum: vm.goods.stockSupplyNum,
        goodsNo: vm.goods.goodsNo,
        goodsSaleNum: vm.goods.saleNum,
        integralAmount: vm.form.integralAmount,
        pensionAmount: vm.form.pensionAmount,
        shelfUpDate: vm.goods.shelfUpDate,
        shopId: vm.account.shopId,
        state: '1',
        stockSupplyCost: vm.goods.stockSupplyCost,
        orderNo: getCurrentPageParams('orderNo')
      }
      if (vm.goods.goodsSpecList) {
        params.goodsSpecId = vm.goods.goodsSpecList[0].goodsSpecId
      }
      SUPPLIER_EXPEND_DIS(params)
        .then(r => {
          if (r.data.code === '0') {
            vm.$alert('申请扣除赊货锁额成功', '').then(() => {
              vm.$router.go(-1)
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    },
    getStockOrderInfo () {
      const vm = this
      FIND_STOCK_ORDER_INFO(
        getCurrentPageParams('orderNo') || '414141331711983616'
      )
        .then(r => {
          if (r.data.code === '0') {
            // vm.form = r.data.data
            let obj = {}
            if (r.data.data) {
              obj = r.data.data.orderGoodsList
                ? r.data.data.orderGoodsList[0]
                : {}
            }
            if (vm.$cookie.get('setAdderss')) {
              vm.form = {
                ...r.data.data,
                ...obj,
                ...vm.$cookie.get('setAdderss')
              }
            } else {
              vm.form = { ...r.data.data, ...obj }
            }
            vm.defaultAdderss(vm.form)
            if (!vm.form.goodsNo) {
              return false
            }
            vm.getStockGoodsInfo(vm.form.goodsNo)
            vm.getGoodsInfo(vm.form.goodsNo)
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    },
    getStockGoodsInfo (goodsNo) {
      const vm = this
      FIND_STOCK_GOODS_INFO(goodsNo)
        .then(r => {
          if (r.data.code === '0') {
            vm.goods = r.data.data
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    },
    getGoodsInfo (goodsNo) {
      const vm = this
      FIND_SHOP_GOODS_INFO(goodsNo)
        .then(r => {
          if (r.data.code === '0') {
            // 销售数量
            if (r.data.data) {
              if (r.data.data.saleNum) {
                let { saleNum } = r.data.data
                vm.goods = r.data.data
                vm.saleNum = saleNum
              } else {
                vm.saleNum = 0
              }
            } else {
              vm.saleNum = 0
            }
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    },
    defaultAdderss (item) {
      const vm = this
      let setAdderss = {
        province: vm.form.province,
        area: vm.form.area,
        city: vm.form.city,
        addressInfo: vm.form.addressInfo,
        addressContact: vm.form.addressContact,
        addressPhone: vm.form.addressPhone
      }
      vm.$cookie.set('setAdderss', setAdderss)
      if (vm.$cookie.get('setAdderss')) {
        vm.setAdderss = { ...vm.$cookie.get('setAdderss') }
      } else {
        vm.setAdderss = {
          // province: vm.form.province,
          // area: vm.form.area,
          // city: vm.form.city,
          // addressInfo: vm.form.shopAddress,
          // addressContact: vm.form.shopName,
          // addressPhone: vm.form.phone
        }
      }
    } // 高保没有设置地址，设置默认地址
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';
.content {
  height: auto;
  background: #f6f8f9;
  > .zhan {
    height: 20px;
  }
  .list-info {
    width: 95%;
    margin: auto;
    background: #fff;
    margin-bottom: 15px;
    color: #000;
    border-radius: 6px;
    > .shop-info {
      width: 100%;
      margin: 0 auto 15px;
      background: #fff;
      padding: 0;
      > .margin {
        width: 90%;
        margin: auto;
        display: flex;
        align-items: center;
        padding: 12px 0;
        > img {
          width: 75px;
          height: 75px;
          border-radius: 6px;
        }
        > .right {
          width: calc(100% - 75px - 15px);
          height: 75px;
          margin-left: 15px;
          font-size: 14px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          > div {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #000;
            .tab {
              font-size: 12px;
              padding: 2px 4px;
              background: #7f7f7f;
              color: #fff;
              border-radius: 6px;
            }
            span {
              font-size: 14px;
            }
            p {
              font-size: 12px;
            }
          }
        }
      }
    }
    > div {
      width: 95%;
      margin: auto;
      padding: 18px 0;
      background: #fff;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      border-bottom: 1px solid #f3f3f3;
      > .gray {
        color: #727272;
      }
      > .red {
        color: #ef250b;
      }
    }
    .img-box {
      display: flex;
      justify-content: flex-start;
      > .refundImg {
        width: 60px;
        height: 60px;
        border-radius: 6px;
      }
      > .refundImg:nth-last-child(2) {
        margin: 0 10px;
      }
    }
    > div:nth-last-child(1) {
      border: 0;
    }
  }
  > .address-info {
    width: 95%;
    margin: auto;
    background: #fff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    font-size: 14px;
    margin-bottom: 20px;
    > .top-left {
      width: 95%;
      > .one-info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        > .info {
          display: flex;
          align-items: center;
          height: 40px;
          > .coordinates {
            width: 30px;
          }
          > div {
            display: flex;
            align-items: center;
            color: #000;
            span {
              color: #ef250b;
              margin-left: 5px;
            }
          }
        }
        > .update-address-btn {
          font-size: 14px;
          color: #ef250b;
        }
      }
      > .add {
        margin-left: 30px;
        color: #696969;
        padding-bottom: 15px;
      }
    }
  }
  > .list {
    width: 100%;
    background: #fff;
    margin-bottom: 15px;
    > div {
      width: 95%;
      margin: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      > div {
        display: flex;
        align-items: center;
        height: 40px;
        color: #000;
        font-size: 14px;
        span {
          width: 120px;
          color: #666;
          display: block;
        }
      }
      > p {
        font-size: 13px;
        color: #f24d38;
      }
    }
  }
  .btn {
    width: 95%;
    margin: 10px auto 50px;
    height: 45px;
    font-size: 14px;
    color: #fff;
    line-height: 45px;
    border-radius: 25px;
    background: linear-gradient(to right, $new-red-tint, $new-red-dark);
  }
  .btn2 {
    width: 95%;
    margin: auto;
    height: 45px;
    font-size: 14px;
    color: $new-red-tint;
    line-height: 45px;
    border-radius: 25px;
    background: #fff;
    border: 1px solid $new-red-tint;
  }
  .btn3 {
    width: 95%;
    margin: auto;
    height: 45px;
    font-size: 14px;
    color: #fff;
    line-height: 45px;
    border-radius: 25px;
    border: 1px solid #ecebf3;
    background: #ecebf3;
  }
}
.rejectRefundClass {
  background: #fff;
  width: 330px;
  height: 280px;
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  p {
    width: 280px;
    font-size: 14px;
    font-weight: 500;
    padding-top: 30px;
    margin: auto;
  }
  .input {
    width: 280px;
    height: 140px;
    border: 1px solid #dcdcdc;
    font-size: 14px;
    color: #000;
    border-radius: 5px;
    margin: 20px auto;
    padding: 5px 0 0 5px;
  }
  div {
    display: flex;
    align-items: center;
    justify-content: center;
    button {
      width: 100px;
      height: 28px;
      border-radius: 4px;
      line-height: 28px;
      text-align: center;
      font-size: 14px;
    }
    .ok {
      // background: #e33333;
      background: #626efd;
      color: #fff;
      border: 1px solid #626efd;
    }
    .no {
      background: #fff;
      color: #8d8d8d;
      border: 1px solid #8d8d8d;
    }
  }
}
.zz {
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #000000;
  opacity: 0.3;
}
</style>
